<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>信息中心</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="../../bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
  <link rel="stylesheet" type="text/css" href="../css/common.css">
  <style type="text/css">
    .mainContent{
      height: 100%;
      padding: 3px;
      border: 0px solid #0f0;
      /*设置滚动条*/
      overflow-x: hidden;
      overflow-y: scroll;
      /*解决ios上滑动不流畅*/
      -webkit-overflow-scrolling: touch;
      /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
    }
      /*设置滚动条，谷歌内核webkit*/
    .container ::-webkit-scrollbar {
        display: none;
    }
    /*设置滚动条，IE或者Firefox*/
    .container {
        -ms-overflow-style: none; /*IE 10+*/
        overflow: -moz-scrollbars-none; /*Firefox*/
    }
  </style>
</head>
<body>
	<div class="container">
    <header class="bar bar-nav header">
      <h1 class='title'>信息中心</h1>
    </header>
    <!-- 中间，记录显示 -->
    <div class="mainContent" id="mainContent" onscroll="myScrollToTopFn()">
      <div class="content-wrapping">
        <div class="buttons-tab">
          <a href="#" class="tab-link button takeInfoBtn active">预约领取</a>
          <a href="#" class="tab-link button takeBackInfoBtn">预约取回</a>
          <a href="#" class="tab-link button systemInfoBtn">系统信息</a>
        </div>
        <!-- 预约领取 -->
        <div class="takeInfoDiv">
          <div class="card demo-card-header-pic">
            <div class="card-header color-white no-border no-padding">
              <a href="taken.html" style="color: #000;">
                <img class='card-cover' src="../../images/3.jpg" style="width: 538px;height: 250px;">
              </a>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="taken.html" style="color: #000;">
                  <strong class="">标题此处是内容此...</strong>
                </a>
                <span class="color-gray" style="float: right;">发布于 2015/01/15</span>
                <p>此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...</p>
              </div>
            </div>
          </div>
          <div class="card demo-card-header-pic">
            <div class="card-header color-white no-border no-padding">
              <a href="taken.html" style="color: #000;">
                <img class='card-cover' src="../../images/3.jpg" style="width: 538px;height: 250px;">
              </a>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="taken.html" style="color: #000;">
                  <strong class="">标题此处是内容此...</strong>
                </a>
                <span class="color-gray" style="float: right;">发布于 2015/01/15</span>
                <p>此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...</p>
              </div>
            </div>
          </div>
          <div class="card demo-card-header-pic">
            <div class="card-header color-white no-border no-padding">
              <a href="taken.html" style="color: #000;">
                <img class='card-cover' src="../../images/3.jpg" style="width: 538px;height: 250px;">
              </a>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="taken.html" style="color: #000;">
                  <strong class="">标题此处是内容此...</strong>
                </a>
                <span class="color-gray" style="float: right;">发布于 2015/01/15</span>
                <p>此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...</p>
              </div>
            </div>
          </div>
        </div><!-- end of .takeInfoDiv -->
        <!-- 预约取回 -->
        <div class="takeBackInfoDiv" style="display: none;">
          <div class="card demo-card-header-pic">
            <div class="card-header color-white no-border no-padding">
              <a href="taken.html" style="color: #000;">
                <img class='card-cover' src="../../images/2.jpg" style="width: 538px;height: 250px;">
              </a>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="taken.html" style="color: #000;">
                  <strong class="">标题此处是内容此...</strong>
                </a>
                <span class="color-gray" style="float: right;">发布于 2015/01/15</span>
                <p>此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...</p>
              </div>
            </div>
          </div>
          <div class="card demo-card-header-pic">
            <div class="card-header color-white no-border no-padding">
              <a href="taken.html" style="color: #000;">
                <img class='card-cover' src="../../images/2.jpg" style="width: 538px;height: 250px;">
              </a>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="taken.html" style="color: #000;">
                  <strong class="">标题此处是内容此...</strong>
                </a>
                <span class="color-gray" style="float: right;">发布于 2015/01/15</span>
                <p>此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...</p>
              </div>
            </div>
          </div>
          <div class="card demo-card-header-pic">
            <div class="card-header color-white no-border no-padding">
              <a href="taken.html" style="color: #000;">
                <img class='card-cover' src="../../images/2.jpg" style="width: 538px;height: 250px;">
              </a>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="taken.html" style="color: #000;">
                  <strong class="">标题此处是内容此...</strong>
                </a>
                <span class="color-gray" style="float: right;">发布于 2015/01/15</span>
                <p>此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...此处是内容...</p>
              </div>
            </div>
          </div>
        </div><!-- end of .takeBackInfoDiv -->
        <!-- 系统信息 -->
        <div class="systemInfoDiv" style="display: none;">
          <div class="card">
            <div class="card-header">
              <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">标题</a>
              <div class="card-header-right color-gray" style="font-size: 17px;">发布于  2019/02/26</div>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">
                  内容：头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                </a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">标题</a>
              <div class="card-header-right color-gray" style="font-size: 17px;">发布于  2019/02/26</div>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">
                  内容：头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                </a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">标题</a>
              <div class="card-header-right color-gray" style="font-size: 17px;">发布于  2019/02/26</div>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">
                  内容：头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                </a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">标题</a>
              <div class="card-header-right color-gray" style="font-size: 17px;">发布于  2019/02/26</div>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="systemInfoDetail.html" class="cardInfo" style="color: #3D414A;">
                  内容：头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                </a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a href="#" class="cardInfo" style="color: #3D414A;">标题</a>
              <div class="card-header-right color-gray" style="font-size: 17px;">发布于  2019/02/26</div>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="#" class="cardInfo" style="color: #3D414A;">
                  内容：头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                </a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a href="#" class="cardInfo" style="color: #3D414A;">标题</a>
              <div class="card-header-right color-gray" style="font-size: 17px;">发布于  2019/02/26</div>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="#" class="cardInfo" style="color: #3D414A;">
                  内容：头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                </a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a href="#" class="cardInfo" style="color: #3D414A;">标题</a>
              <div class="card-header-right color-gray" style="font-size: 17px;">发布于  2019/02/26</div>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <a href="#" class="cardInfo" style="color: #3D414A;">
                  内容：头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                </a>
              </div>
            </div>
          </div>
        </div><!-- end of .systemInfoDiv -->
        <div class="article-end text-center" style="padding: 10px;display: none;">已经到底啦～</div>
      </div><!-- end of .content-wrapping -->
    </div><!-- end of .mainContent -->
		<!-- 底部，导航栏 -->
		<footer class="footer">
		  <nav class="bar bar-tab">
		    <a class="tab-item" href="../01/home.html">
		      <span class="icon icon-home"></span>
		      <span class="tab-label">首页</span>
		    </a>
		    <a class="tab-item" href="../02/issue.html">
		      <span class="icon icon-edit"></span>
		      <span class="tab-label">发贴</span>
		    </a>
		    <a class="tab-item active goToTopA" href="../03/message.html">
		      <span class="icon icon-message goToTopIcon"></span>
		      <span class="tab-label goToTopInfo">信息</span>
		    </a>
		    <a class="tab-item" href="../04/me.html">
		      <span class="icon icon-me"></span>
		      <span class="tab-label">我</span>
		    </a>
		  </nav>
		</footer>
	</div> <!-- end of .container -->

  <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type="text/javascript" src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    // 获取滚动的元素
    var scrollArticle = document.getElementById("mainContent")
    // 回到顶部函数
    function myScrollToTopFn() {
      // 获取滚动后的scrollTop值
      var articleScrollTop = scrollArticle.scrollTop 
      // 滚动一定距离后，显示回到顶部标识；否则复原
      if ( articleScrollTop > 200 ) {
        $('.goToTopIcon').removeClass('icon-message')
        $('.goToTopIcon').addClass('icon-up')
        $('.goToTopInfo').text('返回顶部')
        $('.goToTopA').attr('href','#')   // 去掉相对路径
        $('.goToTopA').on('click', function () {
          // 平滑的滚回到顶部
          scrollArticle.scrollTo({top:0,behavior:'smooth'})
        })
        $('.article-end').css('display','block') // 到底通知显示
      } else {
        $('.goToTopIcon').removeClass('icon-up')
        $('.goToTopIcon').addClass('icon-message')
        $('.goToTopInfo').text('信息')
        $('.goToTopA').attr('href','../03/message.html')  // reload current page
        $('.article-end').css('display','none')
      }
    } // end of myScrollToTopFn()
    $(function(){
      // 点击卡片（预约领取），显示内容
      $('.takeInfoBtn').on('click', function(){
        $('.takeInfoDiv').show()
        $('.takeInfoBtn').addClass('active')
        $('.takeBackInfoDiv').hide()
        $('.takeBackInfoBtn').removeClass('active')
        $('.systemInfoDiv').hide()
        $('.systemInfoBtn').removeClass('active')
      })
      // 点击卡片（预约取回），显示内容
      $('.takeBackInfoBtn').on('click', function(){
        $('.takeBackInfoDiv').show()
        $('.takeBackInfoBtn').addClass('active')
        $('.takeInfoDiv').hide()
        $('.takeInfoBtn').removeClass('active')
        $('.systemInfoDiv').hide()
        $('.systemInfoBtn').removeClass('active')
      })
      // 点击卡片（系统信息），显示内容
      $('.systemInfoBtn').on('click', function(){
        $('.systemInfoDiv').show()
        $('.systemInfoBtn').addClass('active')
        $('.takeInfoDiv').hide()
        $('.takeInfoBtn').removeClass('active')
        $('.takeBackInfoDiv').hide()
        $('.takeBackInfoBtn').removeClass('active')
      })
    }) // end of $(function(){})
  </script>
</body>
</html>